<template>
	<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
		<el-form :model="state.queryParams" ref="queryForm" :inline="true">
			<el-form-item label="售后类型">
				<el-select v-model="state.queryParams.cms_PartType_ID" placeholder="Select" style="width: 240px">
					<el-option
						v-for="item in state.TypeData"
						:key="item.id" :label="item.name" :value="item.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button round type="primary" icon="ele-Search" @click="handleQuery"> 查 询 </el-button>
				<el-button round type="primary" icon="ele-Plus" @click="AddafterSale"> 新 增 </el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card class="full-table" shadow="hover" style="margin-top: 8px; height: calc(100% - 74px)">
		<el-table :data="state.AfterSaleData" style="width: 100%" v-loading="state.loading" border>
			<el-table-column prop="id" label="序号" header-align="center" show-overflow-tooltip />
			<el-table-column prop="name" label="标题" min-width="150" header-align="center" show-overflow-tooltip />
			<el-table-column prop="sort" label="排序" align='center' min-width="70" header-align="center" show-overflow-tooltip />
			<el-table-column label="图片" header-align="center" show-overflow-tooltip>
				<template #default="scope">
					<el-image v-if="scope.row.imgUrl" :src="getUrl(scope.row.imgUrl)"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="260" fixed="right" align="center" show-overflow-tooltip>
				<template #default="scope">
					<el-button icon="ele-Delete" size="small" text type="danger" @click="delafterSale(scope.row)"> 删除 </el-button>
					<el-button icon="ele-Edit" size="small" text type="primary" @click="UpdateAfterSale(scope.row)"> 编辑 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div>
			<el-pagination
				v-model:currentPage="state.tableParams.page"
				v-model:page-size="state.tableParams.pageSize"
				:total="state.tableParams.total"
				:page-sizes="[10, 20, 50, 100]"
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
			/>
		</div>
	</el-card>
	<EditAfterSaleTemp ref="editAfterSaleTempRef" :title="state.editAfterSaleTitle" :node="state.node" @handleQuery="handleQuery" />
</template>
<script lang="ts" setup name="sysFile">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Pagecms_Label } from '/@/api/CMS/cms_label';
import EditAfterSaleTemp from '/@/views/CMS/cms_Template/common/after_saleTemp.vue';
import { Pagecms_Part, Delcms_Part } from '/@/api/CMS/cms_part';
const editAfterSaleTempRef = ref<InstanceType<typeof EditAfterSaleTemp>>();
const props = defineProps({
	isshow: false as any,
});

const state = reactive({
	loading: false,
	AfterSaleData: [] as any,
	queryParams: {
		cms_Column_ID: 0,
		cms_PartType_ID:0,
	},
	node: {} as any,
	tableParams: {
		page: 1,
		pageSize: 10,
		total: 0 as any,
	},
	TypeData: [] as any,//售后类型
	editAfterSaleTitle: '',
});

// 查询操作
const handleQuery = async () => {
	state.loading = true;
	let params = Object.assign(state.queryParams, state.tableParams);
	var res = await Pagecms_Part(params);
	state.AfterSaleData = res.data.result ? res.data.result.items : [];
	state.tableParams.total = res.data.result?.total;
	state.loading = false;
};
//新增
const AddafterSale = async () => {
	state.editAfterSaleTitle = '新增';
	editAfterSaleTempRef.value?.openDialog({});
};
// 删除
const delafterSale = (row: any) => {
	ElMessageBox.confirm(`确定删除：【${row.title}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			// 删除接口
			await Delcms_Part({ id: row.id });
			handleQuery();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};
const getUrl = (url: any) => {
	return window.baseUrl + url;
};
// 改变页面容量
const handleSizeChange = (val: number) => {
	state.tableParams.pageSize = val;
	handleQuery();
};
const inittableData = async (node: any) => {
	state.node = node;
	state.queryParams.cms_Column_ID = node.id;
	handleQuery();
};
// 改变页码序号
const handleCurrentChange = (val: number) => {
	state.tableParams.page = val;
	handleQuery();
};
// 打开编辑页面
const UpdateAfterSale = (row: any) => {
	state.editAfterSaleTitle = '修改';
	editAfterSaleTempRef.value?.openDialog(row);
};
// 页面加载时
onMounted(async () => {
	var typeres = await Pagecms_Label({});
	state.TypeData = typeres.data.result ?? [];
	state.TypeData.push({id:0,name:'所有'});
});
//将属性或者函数暴露给父组件
defineExpose({ inittableData });
</script>
<style scoped>
:deep(.full-table) {
	height: 100%;
}
:deep(.el-card__body) {
	height: 100%;
}
:deep(.el-image__inner){
	width:100px !important;
}
</style>
